<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.0.0.min.js"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			body {
				background-color: #000000;
			}
			
			.btn {
				width: 60%;
				height: 40px;
				margin-left: 22%;
				margin-top: 50px;
				float: left;
				border: 1px solid black;
				border-radius: 10px;
				background-color: aqua;
			}
			
			#zzz {
				border: 10px solid #FF0000;
				border-radius: 100px;
				width: 20%;
				position: fixed;
				left: -17%;
				transition: left 2s;
				top: 10px;
			}
			
			#yyy {
				border: 10px solid #FF0000;
				border-radius: 100px;
				width: 80%;
				float: right;
				position: fixed;
				right: -75%;
				transition: right 2s;
				top: 10px;
			}
			
			#xxx {
				border: 1px solid black;
				border-radius: 100px;
				width: 80%;
				height: 80%;
				background-image: url(img/020.png);
				margin-left: 10%;
				margin-top: 5%;
			}
			
			#zhushen {
				width: 301px;
				height: 301px;
			}
		</style>
	</head>

	<body>
		
		<!--主神-->
		<div id="zhushen"><img src="img/001.gif" onclick="zhushen()"></div>
		<!--左边框-->
		<div id="zzz" onclick="kongbai()">
			
			<a href="#"><input id="aaa" class="btn" type="button" value="科技类" onmouseover="over(this)" onmouseout="out(this)" /></a>
			<a href="#"><input id="bbb" class="btn" type="button" value="辅助类" onmouseover="over(this)" onmouseout="out(this)" /></a>
			<a href="#"><input id="ccc" class="btn" type="button" value="魔法修真类" onmouseover="over(this)" onmouseout="out(this)" /></a>
			<a href="#"><input id="ddd" class="btn" type="button" value="娱乐类" onmouseover="over(this)" onmouseout="out(this)" /></a>
		</div>
		<!--右边框-->
		<div id="yyy" onclick="kongbai()">
			<div id="xxx"></div>
		</div>

	</body>

</html>
<script>
	var zzz = document.getElementById("zzz");
	var yyy = document.getElementById("yyy");
	var zhushen01 = document.getElementById("zhushen");

	//左侧边框高度
	zzz.style.height = window.innerHeight - 50 + "px";
	//右侧边框的高度
	yyy.style.height = window.innerHeight - 50 + "px";
	//浏览器窗口变化时，相关元素的高度跟随变化
	window.onresize = function() {
		zzz.style.height = window.innerHeight - 50 + "px";
		yyy.style.height = window.innerHeight - 50 + "px";
	}

	//鼠标移入按钮，按钮变大
	function over(e) {
		e.style.width = "80%";
		e.style.height = "80px";
		e.style.marginLeft = "10%";
		e.style.marginTop = "30px";
	}
	//鼠标移出按钮，按钮恢复原样
	function out(e) {
		e.style.width = "60%";
		e.style.height = "40px";
		e.style.marginLeft = "20%";
		e.style.marginTop = "50px";
	}

	//左边框出现
	function over_zzz() {
		zzz.style.left = "0px";

	}

	//右边框出现，并且主神隐藏
	function over_yyy() {
		yyy.style.right = "0px";
		setTimeout("zs_yincang()", "700");
	}

	//主神出现
	function zs_show() {
		zhushen01.style.display = "inline";
	}

	//主神隐藏
	function zs_yincang() {
		zhushen01.style.display = "none";
	}

	//单击左右边框空白处时，主神出现，其它元素隐藏
	function kongbai() {
		zzz.style.left = "-17%";
		yyy.style.right = "-75%";
		//延迟0.6秒调用显示主神
		setTimeout("zs_show()", "500");
	}

	//单击主神，主神隐藏，其它元素出现
	function zhushen() {
		over_zzz();
		over_yyy();
	}

	//主神居中事件
	$(window).resize(function() {
		$("#zhushen").css({
			position: "fixed",
			left: ($(window).width() - $("#zhushen").outerWidth()) / 2,
			top: ($(window).height() - $("#zhushen").outerHeight()) / 2 + $(document).scrollTop()
		});
	});
	$(window).resize();
</script>